import React from "react";

function BoilingStatus(props) {
  if (props.celsius >= 100) {
    return <span>水开了</span>;
  } else {
    return <span>水没开</span>;
  }
}
class Temprature extends React.Component{
  constructor(){
    this.state={
      
    }
  }
  handleChange(e){
    this.setState({ temprature:e.target.value })
  }
  render(){
    return (
      <fieldset>
        <legend>温度：</legend>
        <input value={temprature} onChange={this.handleChange.bind(this)}></input>
        <BoilingStatus celsius={temprature}></BoilingStatus>
      </fieldset>
    )
  }
}

export default class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      temprature:'',
      scale:'c'
    };
  } 
  render() {
    let {temprature,scale} = this.state
    let celsius = scale === 'c' ? temprature : ''
    return (
      <div>
        <Temprature temprature={temprature} scale='c'></Temprature>
        <Temprature temprature={temprature} scale='f'></Temprature>
        <BoilingStatus celsius={temprature}></BoilingStatus>
      </div>
    );
  }
}
